<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<div class="col-md-9" >
    <div class="data_list" style="border-radius: 15px" id="text_body">
        <div class="data_list_title">
            <span class="glyphicon glyphicon-eye-open"></span>&nbsp;查看云记
        </div>
        <b>
            <div class="note_title"><h2>《${blog.title}》</h2></div>
            <br>
            <div class="note_info" style="border-radius: 5px;background-color: #f0f0f0;height: 30px;text-align: center;line-height: 30px">
                <img src="statics/images/see.png" style="height: 20px;width: 20px" alt="浏览量" />&nbsp;
                <c:if test="${blog.viewCount  < 10000}">
                    ${blog.viewCount}
                </c:if>
                <c:if test="${blog.viewCount  >= 10000}">
                    <fmt:formatNumber value="${blog.viewCount  / 10000}" pattern="0.00"/> w
                </c:if>
                &nbsp;&nbsp;
                发布时间：『 <fmt:formatDate value="${blog.time}" pattern="yyyy-MM-dd HH:mm:ss"/> 』
                &nbsp;&nbsp;云记类别：${blog.typeName}&nbsp;&nbsp;用户:${blog.userName}
            </div>



            <div class="note_content" style="overflow-wrap: break-word;min-height: 350px">
                <p>${blog.content}</p>
            </div>
            <br>
            <div style="width: 100%;height: 4px;background-color: #f7f7f7"></div>

            <%--本人才可以修改--%>
            <c:if test="${user.id == blog.userID}">
                <div class="note_btn">
                    <button class="btn btn-primary" style="outline: none;box-shadow:none;" type="button" onclick="updateNote(${blog.id})">修改</button>
                    <button class="btn btn-danger" style="outline: none;box-shadow:none;" type="button" onclick="deleteNote(${blog.id})">删除</button>
                </div>
            </c:if>
            <%-- 非本人显示点赞按钮 --%>
            <c:if test="${user.id != blog.userID}">
                <div class="note_btn">

                    <img src="statics/images/zan0.png" alt="点赞" style="width: 35px;height: 35px" id="img" onclick="dian(${blog.id})"/>
                    &nbsp;<span id="dianCount">${dianCount}</span>&nbsp;<span id="dianText">点赞</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="statics/images/forward.png" alt="转发" style="width: 40px;height: 40px;" id="forw" onclick="forw()"/>
                </div>
            </c:if>

        </div>


    <%--评论区--%>
    <div class="data_list" style="border-radius: 15px;float: left;width: 100%;">
        <div class="data_list_title">
            <span class="glyphicon glyphicon-eye-open"></span>&nbsp;全部评论（${allCommentSize}）&nbsp;&nbsp;<span style="color: #00a0e9" onclick="getSend(${commentSize})">点击此处评论</span>
        </div>
        <b></b>

        <div style="width: 100%;" id="fatherComment" hidden="hidden">
            <br>
            <textarea style="margin-left: 50px;border-radius: 10px;width: 80%;height: 65px;resize: none;background-color: #f5f5f6;outline: none;border: none;padding: 10px" id="fatherText" placeholder="发一条友善的评论吧！"></textarea>
            <br><button class="btn btn-primary" style="height: 35px;margin-left: 50px;" onclick="send()">评论</button>&nbsp;<button class="btn btn-warning" style="height: 35px" onclick="cancel(${commentSize})">取消</button>

        </div>
        <br>
        <div class="note_info" id="commentBord" style="text-align: center;overflow-y: auto;overflow-x: hidden">
            <c:if test="${empty commentList}">
                暂无评论，快来抢沙发吧！
            </c:if>
            <c:if test="${!empty commentList}">
                <c:forEach items="${commentList}" var="item" varStatus="ss">
                    <div style="width: 100%;text-align: left;margin-right: 20px;overflow-x: hidden" id="sonDiv${ss.index}">
                        <img style="width: 40px;height: 40px;border-radius: 20px" src="user?actionName=userHead&imageName=${item.userHead}"/>

                        <span style="font-size: 23px;font-weight: bold;margin-left: 10px">${item.userNick}</span>&nbsp;<span style="font-size: 13px;font-weight: normal">『 <fmt:formatDate value="${item.time}" pattern="yyyy-MM-dd HH:mm:ss"/> 』</span>&nbsp;<br>
                        <span style="border-radius: 5px;display: block;padding: 5px;font-size: 16px;font-weight: normal;margin-left: 50px;max-width: 80%">${item.text}</span><br>
                        <span style="margin-left: 50px;font-weight: normal" id="back${ss.index}" onclick="getSon(${ss.index})">0条回复</span>&nbsp;&nbsp;<span style="color: #00a0e9" id="span${ss.index}" onclick="getSend2(${ss.index}, ${commentSize})">回复</span>
                        <br>

                            <%--子评论框--%>
                        <div style="width: 100%;" id="sonComment${ss.index}" hidden="hidden">
                            <textarea style="border-radius: 10px;width: 80%;height: 65px;resize: none;margin-left: 50px;background-color: #f5f5f6;outline: none;border: none;padding: 10px" id="sonText${ss.index}" placeholder="发一条友善的评论吧！"></textarea>
                            <br><button class="btn btn-primary" style="height: 35px;margin-left: 50px" onclick="send2(${ss.index}, ${commentSize}, ${item.id}, ${item.userId}, '${item.text}')">评论</button>&nbsp;<button class="btn btn-warning" style="height: 35px" onclick="cancel(${commentSize})">取消</button>

                        </div>

                            <%--展开子评论--%>
                        <div id="sonCommentList${ss.index}" style="margin-left: 50px;" hidden="hidden">
                            <c:if test="${! empty backCommentList[ss.index]}">
                                <c:forEach items="${backCommentList[ss.index]}" var="it" varStatus="sss">
                                    <div style="width: 100%;text-align: left;overflow-x: hidden" id="sonDiv${sss.index}">
                                        <hr>
                                        <img style="width: 30px;height: 30px;border-radius: 15px" src="user?actionName=userHead&imageName=${it.userHead}"/>
                                        <span style="font-size: 19px;font-weight: 500;margin-left: 10px">${it.userNick}  &nbsp;<span style="font-size: 10px;font-weight: normal">『 <fmt:formatDate value="${it.time}" pattern="yyyy-MM-dd HH:mm:ss"/> 』</span>&nbsp;<br>
                                            <%--background-color: #e7e4e4 ; 评论体背景--%>
                                        <span style="max-width: 80%;border-radius: 3px;display: block;padding: 5px;font-size: 13px;font-weight: normal;margin-left: 40px;">${it.text} <span style="color: #00a0e9"> //@ ${it.backUserNick} </span>${it.backCommentText}</span></span><br>
                                        <span style="color: #00a0e9;margin-left: 40px;" id="span${ss.index}_${sss.index}" onclick="getSend3(${sss.index}, ${ss.index})">回复</span>
                                        <br>
                                            <%--子评论框--%>
                                        <div style="width: 100%;" id="sonComment${ss.index}_${sss.index}" hidden="hidden">
                                            <textarea style="border-radius: 10px;width: 80%;height: 65px;resize: none;margin-left: 40px;background-color: #f5f5f6;outline: none;border: none;padding: 10px" id="sonText${ss.index}_${sss.index}" placeholder="发一条友善的评论吧！"></textarea>
                                            <br><button class="btn btn-primary" style="height: 35px;margin-left: 40px" onclick="send3(${sss.index}, ${ss.index}, ${item.id}, ${it.userId}, '${it.text}')">评论</button>&nbsp;<button class="btn btn-warning" style="height: 35px" onclick="cancel2()">取消</button>

                                        </div>
                                    </div>

                                </c:forEach>
                                <br>
                                <span style="color: black;" onclick="getSon(${ss.index})">收起</span>
                            </c:if>

                        </div>

                    </div>

                    <hr>
                </c:forEach>
            </c:if>
        </div>

    </div>

    </div>

    <div style="position: fixed;top: 20%;right: 20px;width: 50px;height: 120px;text-align: center">

        <%--评论--%>
        <img src="statics/images/forward.png" alt="转发" style="width: 60px;height: 60px;" id="forw" onclick="forw()"/>
        <br>
        <c:if test="${empty dian}">
            <input type="hidden" id="f" value="-1"/>
        </c:if>
        <c:if test="${! empty dian}">
            <input type="hidden" id="f" value="${dian}"/>
        </c:if>
        <img src="statics/images/zan0.png" alt="点赞" style="width: 50px;height: 50px" id="img1" onclick="dian(${blog.id})"/>
        &nbsp;<span id="dianCount1">${dianCount}</span><br><span id="dianText1">点赞</span>
        <br>
    </div>
    <%--右侧固定位置div跳转按钮--%>
    <div onclick="jump()" style="position: fixed;top: 45%;right: 20px;width: 50px;height: 50px;background-color: #00a0e9;border: none;border-radius: 5px;">
        <%--记录情况--%>
        <input hidden="hidden" value="1" id="heightValue">
        <span id="rightSpan" style="width: 100%;height: 100%;display: block;text-align: center;line-height: 25px;font-size: 18px;font-weight: 500">
            查看评论
        </span>
    </div>



</div>

<script type="text/javascript">



    var uid = ${user.id};
    var buid = ${blog.userID};
    var bid = ${blog.id};


    var  f = document.getElementById("f");
    if (f.value != -1){
        //初始化点赞情况
        if (uid != buid && uid != -1){
            var  img = document.getElementById("img");
            var s = document.getElementById("dianText");

            if(f.value == 1){
                img.src = "statics/images/zan1.png";
                s.innerHTML = "已赞"
                f.value = 1;
            }else{
                img.src = "statics/images/zan0.png";
                s.innerHTML = "点赞"
                f.value = 0;
            }
        }
        if(f.value == 1){
            document.getElementById("img1").src = "statics/images/zan1.png";
            document.getElementById("dianText1").innerHTML = "已赞"
            f.value = 1;
        }else{
            document.getElementById("img1").src = "statics/images/zan0.png";
            document.getElementById("dianText1").innerHTML = "点赞"
            f.value = 0;
        }
    }



    //初始化二级评论数
    var size_ = ${commentSize};
    var sonCommentList = ${backCountList};
    for (var ii = 0; ii < size_; ii++){
        document.getElementById("back" + ii).innerHTML = sonCommentList[ii] + "条回复";
    }

    //前端未登录提示
    function notify_() {
        if (uid == -1){
            swal({
                title: "",  // 标题
                text: "<h3>请登录后执行此功能！</h3>", // 内容
                type: "warning", // 图标  error	 success	info  warning
                showCancelButton: true,  // 是否显示取消按钮
                confirmButtonColor: "green", // 确认按钮的颜色
                confirmButtonText: "登录", // 确认按钮的文本
                cancelButtonText: "取消",
            }).then(function () {
                //跳转登录
                window.location.href = "login.jsp";
            });

            return true;
        }

        return false;
    }

    //复制URL
    function forw() {
        //由于评论的写法，导致网址url可能是评论的url，故需要拼接字符串（保留？之前的是为了避免以后域名等发生变化）
        var clipBoardContent=this.location.href;

        var strings = clipBoardContent.split("?");
        var str = strings[0];

        str += "?actionName=detail&blogId=" + ${blog.id};
        var tmp = document.createElement("input");
        tmp.value = str;
        document.body.appendChild(tmp)
        tmp.setAttribute('readonly', 'readonly')
        tmp.setAttribute('value', tmp.value)
        tmp.select()
        tmp.setSelectionRange(0, tmp.value.length)
        try {
            document.execCommand('copy')
            swal({
                title: "",  // 标题
                text: "<h3>已将此博客地址复制到剪贴板，快去分享给其他人吧！</h3>", // 内容
                type: "success", // 图标  error	 success	info  warning
                showCancelButton: false,  // 是否显示取消按钮
                confirmButtonColor: "green", // 确认按钮的颜色
                confirmButtonText: "确定", // 确认按钮的文本
            })
        } catch (err) {
            swal({
                title: "",  // 标题
                text: "<h3>此浏览器不支持此功能，建议直接复制地址栏网址分享！</h3>", // 内容
                type: "warning", // 图标  error	 success	info  warning
                showCancelButton: false,  // 是否显示取消按钮
                confirmButtonColor: "green", // 确认按钮的颜色
                confirmButtonText: "确定", // 确认按钮的文本
            })
        }
        document.body.removeChild(tmp)
    }

    //跳转评论以及返回文首
    function jump() {
        var v = document.getElementById("heightValue");
        var body = document.getElementById("text_body");
        var s = document.getElementById("rightSpan");
        if (v.value == 1 || v.value == "1"){
            //document.body.scrollTop = body.offsetHeight;
            document.documentElement.scrollTop = body.offsetHeight - 50;
            //v.value = 0;
        }else {
            //document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
            //v.value = 1;
            //s.innerHTML = "查看评论"
        }



    }

    //监听滚动条
    window.onscroll = function () {
        //上方被遮盖的高度
        var h = document.body.scrollTop;
        //部分浏览器
        var h1 = document.documentElement.scrollTop;

        //获取文章内容div
        var body = document.getElementById("text_body");
        //获取右侧固定栏及其值
        var s = document.getElementById("rightSpan");
        var v = document.getElementById("heightValue");
        var hh = body.offsetHeight;

        //获取屏幕高度
        var height =  window.screen.availHeight;

        //alert("h:" + h + "  h1:" + h1 + "  hh:" + hh + "  height:" + height);

        //进入评论区
        if (h + height - 200 > hh || h1 + height - 200 > hh){
            s.innerHTML = "返回文章";
            v.value = 0;
        } else{
            s.innerHTML = "查看评论";
            v.value = 1;
        }

        if ((h < 50 && h != 0) || h1 < 50){
            s.innerHTML = "查看评论";
            v.value = 1;
        }

        //alert(v.value);

    }



    function getSon(r) {

        var f = document.getElementById("sonCommentList" + r).hidden;

        if(f){
            document.getElementById("sonCommentList" + r).hidden = false;
        }else {
            document.getElementById("sonCommentList" + r).hidden = true;
        }

    }

    function commentFun(str, fatherCommentID, backUID, lText) {
        /*$.ajax({
            type:"get",
            url:"blog",
            data:{
                actionName:"comment",
                blogId:bid,
                text:str,
                fatherCommentId:fatherCommentID,
                fatherCommentUserId:backUID
            },
            success:function (result) {
                //成功
                if (result.code === 1){
                    addView(result.result, role, r)
                }else {
                    alert("失败");
                }

            }
        });*/

        window.location.href = "blog?actionName=comment&blogId=" + bid + "&text=" + str
            + "&fatherCommentId=" + fatherCommentID + "&fatherCommentUserId=" + backUID +
            "&lastText=" + lText;

    }


    /*
    *   优化显示
    * */
    function addView(result, role, r) {
        alert(role + " " + r);
        if (role == 0){
            var bord = document.getElementById("commentBord");

            var str = '';

            //str += '<div style="width: 100%;text-align: left" id="sonDiv ' + ${commentSize} + '">'
            //req
            bord.append(result.text);
            bord.innerHTML += "<br>";
        }else {
            var son = document.getElementById("sonDiv" + r);
            son.append(result.text);
            son.innerHTML += "<br>";
        }
    }

    //父级评论
    function send() {
        //获取内容
        var str = document.getElementById("fatherText").value;
        if (str.length >= 128 || str.length < 3){
            swal({
                title: "",  // 标题
                text: "<h3>评论最多128含有字符，最少3个字符</h3>", // 内容
                type: "warning", // 图标  error	 success	info  warning
                showCancelButton: false,  // 是否显示取消按钮
                confirmButtonColor: "blue", // 确认按钮的颜色
                confirmButtonText: "确定", // 确认按钮的文本
            })
            return;
        }
        //清空内容
        document.getElementById("fatherText").value = "";
        //隐藏评论框
        cancel();
        //一级评论被回复对象就是文章作者，这样可以起到通知作用
        commentFun(str, 0, buid, "#");
    }


    //回复评论
    function send2(r, t, c, u, lText) {

        //获取内容
        var str = document.getElementById("sonText" + r).value;

        if (str.length >= 128 || str.length < 3){
            swal({
                title: "",  // 标题
                text: "<h3>评论最多128含有字符，最少3个字符</h3>", // 内容
                type: "warning", // 图标  error	 success	info  warning
                showCancelButton: false,  // 是否显示取消按钮
                confirmButtonColor: "blue", // 确认按钮的颜色
                confirmButtonText: "确定", // 确认按钮的文本
            })
            return;
        }

        //清空内容
        document.getElementById("sonText" + r).value = "";

        //隐藏评论框
        cancel(t)

        commentFun(str, c, u, lText);
    }

    /*send2 = function (r, t, c, u, lText) {
        alert("111");
        //获取内容
        var str = document.getElementById("sonText" + r).value;

        if (str.length >= 128){
            swal({
                title: "",  // 标题
                text: "<h3>评论最多128含有字符</h3>", // 内容
                type: "warning", // 图标  error	 success	info  warning
                showCancelButton: false,  // 是否显示取消按钮
                confirmButtonColor: "blue", // 确认按钮的颜色
                confirmButtonText: "确定", // 确认按钮的文本
            })
            return;
        }

        //清空内容
        document.getElementById("sonText" + r).value = "";
        //隐藏评论框
        cancel(t)
        commentFun(str, c, u, lText);
    }*/

    function send3(r, t, c, u, lText) {
        //获取内容
        var str = document.getElementById("sonText" + t + "_" + r).value;
        if (str.length >= 128 || str.length < 3){
            swal({
                title: "",  // 标题
                text: "<h3>评论最多128含有字符，最少3个字符</h3>", // 内容
                type: "warning", // 图标  error	 success	info  warning
                showCancelButton: false,  // 是否显示取消按钮
                confirmButtonColor: "blue", // 确认按钮的颜色
                confirmButtonText: "确定", // 确认按钮的文本
            })
            return;
        }
        //清空内容
        document.getElementById("sonText" + t + "_"+ r).value = "";
        //隐藏评论框
        cancel2();

        commentFun(str, c, u, lText);
    }

    //显示父评论框
    function getSend(t) {

        //登录判断
        if (notify_()){
            return;
        }

        //隐藏评论框
        cancel(t);

        //
        cancel2();

        //显示父评论框
        document.getElementById("fatherComment").hidden = false;

    }
    //隐藏父评论框
    function cancel(t) {
        //清空内容
        document.getElementById("fatherText").value = "";
        //隐藏父评论框
        document.getElementById("fatherComment").hidden = true;

        //隐藏全部子评论框
        for(var i = 0;i < t;i++){
            //清空
            document.getElementById("sonText" + i).value = "";
            //隐藏输入框
            document.getElementById("sonComment" + i).hidden = true;
            //显示回复按钮
            document.getElementById("span" + i).hidden = false;
        }

    }

    function cancel2() {

        //清空内容
        document.getElementById("fatherText").value = "";
        //隐藏父评论框
        document.getElementById("fatherComment").hidden = true;

        //一级评论
        for(var i = 0; i < size_; i++){
            //二级框
            //清空
            document.getElementById("sonText" + i).value = "";
            //$(".sonText" + i).val("");
            //隐藏输入框
            document.getElementById("sonComment" + i).hidden = true;
            //$(".sonComment" + i).hidden = true;
            //显示回复按钮
            document.getElementById("span" + i).hidden = false;
            //$(".span" + i).hidden = false;


            //二级评论
            var len = sonCommentList[i];
            if (len > 0){
                for (var j = 0; j < len; j++){
                    /*$(".sonText" + i + "_" + j).val("");
                    $(".sonComment" + i + "_" + j).hidden = true;
                    $(".span" + i + "_" + j).hidden = false;*/
                    document.getElementById("sonText"+ i + "_" + j).value = "";
                    document.getElementById("sonComment" + i + "_" + j).hidden = true;
                    document.getElementById("span" + i + "_" + j).hidden = false;
                }
            }
        }

    }

    //展示子评论
    function getSend2(r, t) {

        //登录判断
        if (notify_()){
            return;
        }

        //同时只能有一个评论框
        cancel(t);
        //
        cancel2();
        //展示对应评论框
        document.getElementById("sonComment" + r).hidden = false;
        //隐藏回复按钮
        document.getElementById("span" + r).hidden = true;

        //$(".sonComment" + r).hidden = false;
        //$(".span" + r).hidden = true;
    }


    function getSend3(r, t) {

        //登录判断
        if (notify_()){
            return;
        }

        cancel2();

        //$(".sonComment" + t + "_" + r).hidden = false;
        //$(".span" + t + "_" + r).hidden = true;
        document.getElementById("sonComment" + t + "_" + r).hidden = false;
        document.getElementById("span" + t + "_" + r).hidden = true;

    }



    //点赞方法
    function dian(blogId){

        //登录判断
        if (notify_()){
            return;
        }

        var status = f.value;

        $.ajax({
            type:"post",
            url:"blog",
            data:{
                actionName:"dianZanFunction",
                status:status,
                blogId:blogId
            },
            success:function (code) {

                if (code.code == 1){
                    //成功
                    if (status == 1){

                        if (uid != buid && uid != -1){
                            img.src = "statics/images/zan0.png";
                            s.innerHTML = "点赞"
                        }
                        document.getElementById("img1").src = "statics/images/zan0.png";
                        document.getElementById("dianText1").innerHTML = "点赞";
                        f.value = 0;
                    }else {
                        if (uid != buid && uid != -1){
                            img.src = "statics/images/zan1.png";
                            s.innerHTML = "已赞"
                        }

                        document.getElementById("img1").src = "statics/images/zan1.png";
                        document.getElementById("dianText1").innerHTML = "已赞";
                        f.value = 1;
                    }
                    if (uid != buid && uid != -1){
                        document.getElementById("dianCount").innerHTML = code.result;
                    }

                    document.getElementById("dianCount1").innerHTML = code.result;
                }

            }

        });
    }

    function deleteNote(blogId) {
        // 弹出提示框询问用户是否确认删除
        swal({
            title: "",  // 标题
            text: "<h3>您确认要删除该记录吗？</h3>", // 内容
            type: "warning", // 图标  error	 success	info  warning
            showCancelButton: true,  // 是否显示取消按钮
            confirmButtonColor: "orange", // 确认按钮的颜色
            confirmButtonText: "确定", // 确认按钮的文本
            cancelButtonText: "取消" // 取消按钮的文本
        }).then(function(){
            // 如果用户确认删除，则发送ajax请求
            $.ajax({
                type:"post",
                url:"blog",
                data:{
                    actionName:"delete",
                    blogId:blogId
                },
                success:function (code) {
                    // 判断是否删除成功
                    if (code == 1) {
                        // 跳转到首页
                        window.location.href = "index";
                    } else {
                        // 提示失败
                        swal("","<h3>删除失败！</h3>", "error");
                    }
                }
            });

        });
    }

    /**
     * 进入发布云记的页面
     * @param noteId
     */
    function updateNote(blogId) {
        window.location.href = "blog?actionName=view&blogId="+blogId;
    }

</script>
